<!--
 * @Author: 陈焕杰
 * @Date: 2020-06-29 16:08:12
 * @LastEditTime: 2020-07-03 14:35:59
 * @LastEditors: Please set LastEditors
 * @Description: 订单记录
 * @FilePath: \mobile_project\src\pages\user\orders\orderDetail\components\record.vue
--> 

<template>
  <div class="record">
    <van-cell-group>
      <van-cell title="订单记录" icon="records" />
      <div class="list">
        <span class="left">订单编号:</span>
        <span class="right">{{order.out_trade_no}}</span>
      </div>
      <div class="list">
        <span class="left">下单时间:</span>
        <span class="right">{{order.created_at}}</span>
      </div>
      <template v-if="order.final_status === 'cancelled'">
        <div class="list">
          <span class="left">取消时间:</span>
          <span class="right">{{order.valid_time}}</span>
        </div>
      </template>
      <template v-else>
        <div class="list">
          <span class="left">付款时间:</span>
          <span class="right" v-if="order.final_status === 'un_shipped'">{{order.paid_at}}</span>
          <span class="right" v-else>-</span>
        </div>
        <div class="list">
          <span class="left">发货时间:</span>
          <span class="right">-</span>
        </div>
        <div class="list">
          <span class="left">收货时间:</span>
          <span class="right">-</span>
        </div>
      </template>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
.record {
  margin-bottom: 10px;
  .van-cell {
    .van-icon {
      font-size: 18px;
      color: #999;
    }
    .van-cell__title {
      span {
        font-size: 14px;
      }
    }
    .van-cell__value {
      .contact {
        font-size: 14px;
        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .list {
    display: flex;
    justify-content: space-between;
    margin: 5px 15px;
    .left {
      font-size: 14px;
      color: #999;
    }
    .right {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>